<template>
    <div>
        <el-button @click="start" type="primary" class="margin-right10">刷新</el-button>
        <AIWarningTips :show="true" />
        <!-- Markdown 内容展示 -->
        <div class="markdown-container">
            <div class="markdown-content markdown-body" v-if="activitysummarize?.content"
                v-html="renderMarkdown(activitysummarize.content)"></div>
            <div v-else class="no-data">暂无分析数据</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import "github-markdown-css/github-markdown-light.css"; // 只引入亮色主题
import { uniqBy } from 'lodash-es';
import MarkdownIt from 'markdown-it';
import mermaid from 'mermaid';
import { computed, nextTick, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { asyncGetactivitysummarize } from '../../api';
import { Storekey } from '../../interface';
import Studycodemodel from '../../mysql_interface/studycodemodel';
import AIWarningTips from '../AIWarningTips.vue';

const p = defineProps<{ data: Studycodemodel.Iactivity }>();

const store = useStore(Storekey);

// 计算用户列表
const users = computed(() => {
    const t1 = p.data.activityuser?.map(c => c.user) || [];
    const t2 = p.data.team?.user ? [p.data.team.user] : [];
    const t3 = p.data.team?.teamuser?.map(c => c.user) || [];
    return uniqBy([...t1, ...t2, ...t3].filter(Boolean), user => user?.ID);
});

// 组件挂载时获取数据
onMounted(() => {
    start();
});

// 获取数据
const activitysummarize = ref<any>(null);
async function start() {
    await getactivitysummarize();
}

async function getactivitysummarize() {
    try {
        activitysummarize.value = await asyncGetactivitysummarize({ activityid: p.data.ID });
    } catch (error) {
        console.error(error);
        // ElMessage.error(error || '获取数据失败');
    }
}

// Markdown 解析器
const md = new MarkdownIt({
    breaks: true, // 换行符转换为 `<br>`
    html: true,   // 允许 HTML 标签
    linkify: true // 识别 URL
});

// 解析 Markdown，并手动处理 Mermaid 代码块
function renderMarkdown(content: string) {
    if (!content) return "";
    // 预处理内容，移除可能导致mermaid解析问题的字符
    const preprocessedContent = content.replace(/```mermaid([\s\S]*?)```/g, (match, code) => {
        const cleanedCode = code.replace(/%/g, ''); // 移除百分号
        return `\`\`\`mermaid${cleanedCode}\`\`\``;
    });
    let html = md.render(preprocessedContent);

    // 替换 Mermaid 代码块，添加 mermaid 的 div
    html = html.replace(
        /<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,
        (_, code) => `<div class="mermaid">${code}</div>`
    );

    // 等待 DOM 更新后渲染 Mermaid
    nextTick(() => {
        try {
            mermaid.initialize({ startOnLoad: false });
            mermaid.init(undefined, document.querySelectorAll(".mermaid"));
        } catch (error) {
            console.error("Mermaid渲染错误:", error);
        }
    });

    return html;
}
</script>

<style scoped>
.margin-right10 {
    margin-right: 10px;
}

.markdown-container {
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    /* border: 1px solid #ebeef5; */
    overflow: auto;
}

.no-data {
    color: #999;
    text-align: center;
    padding: 20px;
}

/* Markdown 内容样式 */
.markdown-container :deep(pre) {
    background: #2d2d2d;
    color: #f8f8f8;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}

/* Mermaid 图表居中 */
:deep(.mermaid) {
    text-align: center;
    margin: 20px;
}
</style>

<style>
/* Mermaid 图表居中 */
.mermaid {
    text-align: center;
    margin: 20px;
}
</style>
